<script lang="ts">
export default {
  emits: ['click'],
  props: {
    title: {
      type: String,
      default: ""
    },
    sub_title:{
      type: String,
      default: ""
    },
    content:{
      type: String,
      default:''
    },
    left_text: {
      type: String,
      default: ''
    },
    is_link: {
      type: Boolean,
      default: false
    },
    icon: {
      type: [String,Boolean],
      default: false
    },
    icon_size: {
      type: [String,Number],
      default: 32
    }
  },
}
</script>
<template>
  <view class="card_item" :hover-class="is_link?'hover':null" @click="$emit('click')">
    <view style="display: flex;flex-direction: row;align-items: center;gap: 10rpx">
      <u-icon v-if="icon" :name="icon" :size="icon_size"></u-icon>
      <view style="display: flex;flex-direction:column">
        <view class="title_box">
          <view class="title">{{ title }}</view>
          <view class="sub_title">{{sub_title}}</view>
        </view>

        <view style="font-size: 24rpx">
          {{content}}
          <slot name="content"></slot>
        </view>
      </view>
    </view>
    <view class="left_title">
      <view style="white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;flex: 1;width: 100rpx;" :style="'text-align:'+textAlign">
        <slot name="left_text"></slot>
        {{ left_text }}
      </view>
      <view v-if="is_link">
        <u-icon :name="arrowIcon"></u-icon>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.card_item {
  display: flex;
  height: 100rpx;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  border-bottom: 1px solid #f5f5f5;
  gap: 30rpx;
}
.title_box{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20rpx;
}
.title {
  color: $uni-color-title;
  font-size: $uni-font-size-base;
}
.sub_title{
  color: $uni-text-color-placeholder;
  font-size: $uni-font-size-sm;
}


.left_title {
  flex: 1;
  display: flex;
  flex-direction: row;
  font-size: $uni-font-size-base;
  color: $uni-text-color-placeholder;
  gap: 8rpx;
  align-items: center;
}


</style>